<template>
  <div class="layout">
    <!--商品详情页 -->

    <div class="divleft">
      <el-carousel :interval="5000" arrow="always" class="carousel">
        <el-carousel-item v-for="item in photosview" :key="item.id" class="carousel">
          <img :src="item.imgpath" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="divright">
      <h3>{{datalist.name}}</h3>
      <p class="sale-desc">{{datalist.sale_desc}}</p>
      <p class="aftersale_company">小米自营</p>
      <p class="aftersale_company">179元 199元</p>

      <div class="verisoncontroller">
        <h1>选择版本</h1>
        <div>
          <el-button type="warning" class="leftversion">
            <span>6GB+126GB</span>
            <span class="rightversion">1699元</span>
          </el-button>
          <el-button type="warning" class="leftversion">
            <span>6GB+126GB</span>
            <span class="rightversion">1699元</span>
          </el-button>
          <br />
          <el-button type="warning" class="leftversion">
            <span>6GB+126GB</span>
            <span class="rightversion">1699元</span>
          </el-button>
          <el-button type="warning" class="leftversion">
            <span>6GB+126GB</span>
            <span class="rightversion">1699元</span>
          </el-button>
        </div>
      </div>
      <div class="verisoncontroller">
        <h1>选择顔色</h1>
        <div>
          <el-button type="warning" class="leftversion">紫玉幻境</el-button>
          <el-button type="warning" class="leftversion">深海微光</el-button>
          <el-button type="warning" class="leftversion">花影驚鴻</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      datalist: {
        name: "Redmi K30",
        sale_desc:
          "120Hz高帧率流速屏 / 索尼6400万前后六摄 / 6.67小孔径全面屏 / 最高可选8GB+256GB大存储 / 高通骁龙730G处理器 / 3D四曲面玻璃机身 / 4500mAh+27W快充 / 多功能NFC"
      },
      photosview: [
        {
          id: 1,
          imgpath:
            "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1575881713.95312238.jpg "
        },
        {
          id: 2,
          imgpath:
            "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1575881713.87312700.jpg "
        },
        {
          id: 3,
          imgpath:
            "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1575881713.87827400.jpg"
        }
      ]
    };
  }
};
</script>
<style scoped>
.divleft {
  width: 48%;
  display: inline-block;
  position: relative;
  top: 50px;
}
.divright {
  width: 48%;
  display: inline-block;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.layout {
  width: 1226px;
  margin: 0px auto;
}
.carousel {
  width: 500px;
  height: 500px;
}
.carousel img {
  width: 100%;
  height: 100%;
}
.sale-desc {
  color: #b0b0b0;
  margin: 0;
  padding: 0;
  padding-top: 8px;
}
.aftersale_company {
  color: #ff6700;
  margin-bottom: 0px;
}
.leftversion {
  margin-left: 0px;
}
.rightversion {
  margin-left: 10px;
}
.verisoncontroller div {
  text-align: center;
}
</style>